<template>
	<view class="box-bg">
		<uni-nav-bar shadow color="#F7F7F7" left-icon="left" backgroundColor="#3485FD" height="65px" title="团购详情"
			@clickLeft="back" />
	</view>
	<view class="tgxq-page">
		<!-- 内容卡片 -->
		<view class="tgxq-card">
			<!-- 新增id显示 -->
			<view class="tgxq-main-title">{{ detail.title }}</view>
			<view class="tgxq-meta">
				<!-- 原shop改为publisher -->
				<text class="tgxq-shop">发布者：{{ detail.publisher }}</text>
				<!-- 原time改为times -->
				<text class="tgxq-time">发布时间：{{ detail.times }}</text>
			</view>
			<image class="tgxq-img" :src="detail.img" mode="aspectFill"></image>
			<!-- 原desc改为content -->
			<view class="tgxq-desc">{{ detail.content }}</view>
			<!-- 新增状态显示 -->
			<view class="tgxq-status" :class="detail.status === 0 ? 'status-info' :
					detail.status === 1 ? 'status-success' :
						detail.status === 2 ? 'status-warning' :
							'status-danger'">
				{{ detail.status === 0 ? '未开始' :
					detail.status === 1 ? '进行中' :
						detail.status === 2 ? '已结束' :
							'已取消' }}
			</view>
		</view>
		<!-- 价格卡片 -->
		<view class="tgxq-price-card">
			<view class="tgxq-price-row">
				<text class="tgxq-price-label">现价：</text>
				<!-- 原price改为presentPrice -->
				<text class="tgxq-price">￥{{ detail.presentPrice }}</text>
				<!-- 原oldPrice改为originalPrice -->
				<text class="tgxq-old-price">原价:￥{{ detail.originalPrice }}</text>
			</view>
			<!-- 原dateRange改为endTime -->
			<view class="tgxq-info">截止时间：{{ detail.endTime }}</view>
			<!-- 原phone改为telephone -->
			<view class="tgxq-info">咨询电话：{{ detail.telephone }}</view>
			<view class="tgxq-info">注意事项：{{ detail.note }}</view>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import baseUrl from '@/untils/urlConfig';
import unirequest from '@/untils/unirequest';

const detail = ref({});

const getTuangouDetails = async (id) => {
	try {
		const res = await unirequest({ url: `${baseUrl}/chy/purchase/${id}`, method: 'GET' });
		if (res.data.code === 200) {
			return res.data.data;  // 假设后端返回格式为{ code: 200, data: 详情对象 }
		}
		return {};
	}
	catch (error) {
		console.error('获取团购详情失败:', error); // 打印错误信息
		return []; // 返回空数组或处理错误
	}
}
onLoad(async (options) => {
	// 从onLoad的options中获取传递的id（注意：uni-app中options参数为字符串类型）
	const id = options.id;
	if (id) {
		const detailData = await getTuangouDetails(id);
		detail.value = detailData;  // 直接使用后端返回的完整字段（包含id、publisher等）
	} else {
		detail.value = { title: '未获取到团购ID' };
	}
});

function back() {
	uni.navigateBack();
}
</script>

<style>
.box-bg {
	position: fixed;
	width: 100%;
	top: 0;
	z-index: 1000;
}

.tgxq-page {
	background: #f8f8f8;
	min-height: 100vh;
	margin-top: 140rpx;
}
.tgxq-header {
	background: linear-gradient(135deg, #2d8cf0 60%, #5bc0eb 100%);
	padding-bottom: 30rpx;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}
.back-arrow {
	position: absolute;
	left: 30rpx;
	top: 60rpx;
	color: #fff;
	font-size: 40rpx;
}
.tgxq-title {
	color: #fff;
	font-size: 36rpx;
	font-weight: bold;
	margin-top: 60rpx;
}
.tgxq-actions {
	position: absolute;
	right: 30rpx;
	top: 60rpx;
	display: flex;
	align-items: center;
	gap: 20rpx;
	color: #fff;
}
.tgxq-card {
	background: #fff;
	border-radius: 24rpx;
	margin: 30rpx 24rpx 24rpx 24rpx;
	box-shadow: 0 2rpx 8rpx #eee;
	padding: 24rpx 0 0 0;
	display: flex;
	flex-direction: column;
	align-items: stretch;
}
.tgxq-main-title {
	font-size: 32rpx;
	color: #222;
	text-align: center;
	margin: 0 0 12rpx 0;
	font-weight: 500;
}
.tgxq-meta {
	display: flex;
	justify-content: space-between;
	align-items: center;
	color: #bbb;
	font-size: 24rpx;
	margin: 0 24rpx 12rpx 24rpx;
}
.tgxq-shop {
	color: #bbb;
}
.tgxq-time {
	color: #bbb;
}
.tgxq-img {
	width: 92%;
	margin: 0 auto 16rpx auto;
	height: 180px;
	border-radius: 20rpx;
	display: block;
}
.tgxq-desc {
	font-size: 28rpx;
	color: #333;
	margin: 0 24rpx 24rpx 24rpx;
	line-height: 1.7;
}
.tgxq-price-card {
	background: #fff;
	border-radius: 24rpx;
	margin: 0 24rpx 24rpx 24rpx;
	box-shadow: 0 2rpx 8rpx #eee;
	padding: 24rpx;
	display: flex;
	flex-direction: column;
	gap: 16rpx;
}
.tgxq-price-row {
	display: flex;
	align-items: baseline;
	gap: 12rpx;
	margin-bottom: 8rpx;
}
.tgxq-price-label {
	color: #ff4d00;
	font-size: 28rpx;
}
.tgxq-price {
	color: #ff4d00;
	font-size: 36rpx;
	font-weight: bold;
}
.tgxq-old-price {
	color: #bbb;
	font-size: 26rpx;
	text-decoration: line-through;
}
.tgxq-info {
	color: #333;
	font-size: 26rpx;
	margin-top: 2rpx;
}

.tgxq-status {
	font-size: 24rpx;
	padding: 4rpx 12rpx;
	border-radius: 12rpx;
	margin: 0 24rpx 24rpx 24rpx;
	display: inline-flex;
}

.status-info {
	background: #e6f7ff;
	color: #2d8cf0;
}

.status-success {
	background: #f6ffed;
	color: #52c41a;
}

.status-warning {
	background: #fffbe6;
	color: #faad14;
}

.status-danger {
	background: #fff1f0;
	color: #ff4d4f;
}
</style>
